<template>
    <div class="inline-block">
        <div v-show="!working" style="height: 32px;line-height: 32px">
            <span class="margin">{{ label }}</span>
            <i class="fa fa-edit" @click="click"></i>
        </div>
        <el-input ref="inputRef" v-show="working" class="no-margin" v-model="value" @focusout="focusout"></el-input>
    </div>
</template>

<script setup lang="ts">

import {ref} from "vue";
import Layers from "@/lang/layers/index";

/**
 * 可编辑文本
 *
 * 文本附带一个编辑角标，点击之后，转为输入框，编辑结束之后，自动提交到后台
 *
 * 类似于 邮箱、手机号 等常用字段，可以直接放到查看页中，允许客户随时编辑，而不需要放到专门的编辑页面
 */
interface Props {
    // 字段值
    value: string;
    // 请求 URL
    url?: string;
    // 关键字
    key?: string;
    // 字段名
    name?: string;
}

const props = defineProps<Props>()


const inputRef = ref();

// 输入值
const label = ref('12312312');
// 编辑值
const value = ref('12312312');

// 是否正在编辑
const working = ref(false);
// 数据正在提交
const loading = ref(false);

// 开启编辑，转为输入框
const click = () => {
    if (props.url !== undefined) {
        working.value = true;
        value.value = label.value;
        inputRef.value.focus();
    }
}

// 焦点消失，转为文本展示
const focusout = () => {
    working.value = false;

    if (loading.value === true) {
        return;
    }

    loading.value = true;
    Layers.ajax({
        url: props.url,
        method: 'PUT',
        params: {id: props.key, name: props.name, value: value.value}
    }).then(() => {
        this.loading = false;
        label.value = value.value;
        Layers.succeed('操作成功!');
    }).catch(err => {
        Layers.warn('数据保存失败!');
    }).finally(() => {
        loading.value = false;
    });
}
</script>

<style lang="scss" scoped>
</style>